<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <!-- 引入Element UI的CSS文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
      <template>
          <el-table :data="tableData" :default-sort="{prop: 'address', order: 'descending'}">
              <el-table-column prop="date" label="日期" width="280" sortable></el-table-column>
              <el-table-column prop="name" label="姓名" width="280"></el-table-column>
              <el-table-column prop="address" label="地址" width="350"></el-table-column>
          </el-table>
      </template>
      <h2>商品列表</h2>
      <el-table :data="arr">
          <!-- type="index"表示序号 序号从1开始 -->
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column prop="title" label="商品名称" width="100"></el-table-column>
          <el-table-column prop="price" label="商品价格" width="100"></el-table-column>
          <el-table-column label="操作" width="100">
              <!-- 自定义列 其中的内容必须放在一个template标签中 -->
              <!-- slot-scope表示当前删除按钮的范围 自定义的变量s包含了当前按钮的信息 -->
              <template slot-scope="s">
                  <!-- s.$index表示获取当前删除按钮所在的行号 行号从0开始 -->
                  <!-- s.row表示删除的数据在数组中对应的对象 -->
                  <el-button type="danger" size="mini" @click="del(s.$index, s.row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
  </div>
  <!-- 引入Vue的js文件 -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- 引入Element UI的js文件 -->
  <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
  <script>
    let v = new Vue({
      el : "#app",
      data : function() {
        return {
            tableData : [{date: '2016-05-03', name: "王小虎", address: '上海市普陀区金沙江路1516弄'},
                {date: '2016-05-04', name: "王小虎", address: '上海市普陀区金沙江路1517弄'},
                {date: '2016-05-02', name: "王小虎", address: '上海市普陀区金沙江路1518弄'},
                {date: '2016-05-01', name: "王小虎", address: '上海市普陀区金沙江路1519弄'}],
            arr: [{title: "李宁球鞋", price: 500},
                {title: "华为手机", price: 6000},
                {title: "小米电视", price: 4999}]
        }
      },
      methods : {
        del(i, product) {
            v.arr.splice(i, 1);
            v.$message("删除" + product.title + "商品");
        }
      }
    })
  </script>
</body>
</html>